<form name="tagsForm" ng-submit="$modal.addSelectedTags()" novalidate>
    <div class="modal-header bg-primary">
        <h3 class="modal-title">Select tags from library</h3>
    </div>
    <div class="modal-body">

        <div class="mb-xs">
            <div class="clearfix">
                <label>
                    Selected tags ({{$modal.formData.selectedTags.length}})
                </label>
                <a class="pull-right" href ng-click="$modal.clearSelection()">Clear selection</a>
            </div>

            <div class="empty-message" ng-if="$modal.formData.selectedTags.length === 0">No tags selected</div>

            <div ng-if="$modal.formData.selectedTags.length > 0">
                <div class="empty-message">
                    <div class="tags-list flexwrap">
                        <tag-item ng-repeat="tag in $modal.formData.selectedTags track by $index" value="tag"
                            class="clickable" ng-click="$modal.selectTag(tag)"></tag-item>
                    </div>
                </div>
                <p class="help-block">Click on a tag to unselect it</p>
            </div>
        </div>

        <div class="mv-xxs" ng-if="!$modal.formData.selectedTaxonomy">
            <label>
                Choose taxonomy
            </label>
            <div class="list-group">
                <a href class="list-group-item" ng-repeat="taxonomy in $modal.taxonomies"
                    ng-click="$modal.selectTaxonomy(taxonomy)" class="clearfix">
                    <span class="badge" uib-tooltip="{{taxonomy.description}}" tooltip-placement="left"
                        tooltip-append-to-body="true"><i class="fa fa-question"></i></span>
                    <span>{{taxonomy.namespace}} </span>
                    <small class="pull-right mr-m"><em class="text-muted">({{taxonomy.tags.length || 0}}
                            tags)</em></small>
                </a>
            </div>
        </div>

        <div ng-if="$modal.formData.selectedTaxonomy">
            <div class="clearfix">
                <label>
                    Choose tags from taxonomy: {{$modal.formData.selectedTaxonomy.namespace}}
                </label>
                <a class="pull-right" href ng-click="$modal.formData.selectedTaxonomy = undefined">Show all
                    taxonomies</a>
            </div>

            <div class="row mb-xxs">
                <div class="col-sm-12">
                    <div class="has-feedback">
                        <input type="text" ng-model="$modal.search" class="form-control" placeholder="Filter tags"
                            autofocus>
                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                </div>
            </div>

            <div style="height: 300px; max-height: 300px; overflow-y: scroll;">
                <div class="list-group">
                    <a href class="list-group-item"
                        ng-repeat="tag in $modal.formData.selectedTaxonomy.tags | filter:$modal.search"
                        ng-click="$modal.selectTag(tag)">
                        <span class="mr-xs"
                            ng-class="{'text-primary': !!tag.selected, 'text-disabled': !!!tag.selected}">
                            <i class="fa fa-check"></i>
                        </span>

                        <span class="badge" ng-if="::tag.description" uib-tooltip="{{::tag.description}}"
                            tooltip-placement="left" tooltip-append-to-body="true">
                            <i class="fa fa-question"></i>
                        </span>

                        <tag-item value="tag"></tag-item>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default pull-left" type="button" ng-click="$modal.cancel()">Cancel</button>
        <button class="btn btn-primary pull-right" type="submit" ng-disabled="$modal.formData.selectedTags === 0">Add
            Selected tags</button>
    </div>
</form>
